<!DOCTYPE html>
<html ng-app="manageTeam" ng-cloak style="height: 100%">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/lib/fontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/lib/navbar/css/responsive-menu.css" rel="stylesheet">
    <link href="/lib/bootstrap-datetime/css/jquery.datetimepicker.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="/lib/angular-toastr/dist/angular-toastr.css"/>
    <link rel="stylesheet" href="/lib/angular-ui-select/dist/select.css">
    <link rel="stylesheet" href="/lib/jquery-ui/jquery-ui.min.css">
    <link href="/css/style.css" rel="stylesheet">

    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/lib/jquery/jquery.cookie.min.js"></script>

    <script src="/lib/navbar/js/modernizr.min.js" type="text/javascript"></script>
    <script src="/lib/navbar/js/modernizr-custom.js" type="text/javascript"></script>
    <script src="/lib/navbar/js/responsive-menu.js" type="text/javascript"></script>

    <script src="/lib/angular/angular.js"></script>
    <script src="/lib/angular-toastr/dist/angular-toastr.tpls.js"></script>
    <script src="/lib/angular-ui-select/dist/select.js"></script>
    <script src="/lib/jquery-ui/jquery-ui.min.js"></script>
    <script src="/js/directives.js"></script>
    <script src="/lib/bootstrap-datetime/js/jquery.datetimepicker.js"></script>
    <script src="/js/manageTeamController.js"></script>

    <title>研发组</title>
</head>
<body ng-controller="manageTeamController" style="height: 100%">

<% include navbar %>
<div class="col-md-4 col-sm-4 margin-top">
    <div class="col-md-10 col-md-offset-1 big-panel">
        <div class="col-md-12 kick-padding-margin">
            <h2 class="group-head"><span>研发组列表</span></h2>
        </div>
        <div class="col-md-12 list-group" id="allTeams" style="margin-top:20px;margin-left: 15px;">
            <div class="list-group-item active" style="background-color: #5AD;color: #eee">研发组名称</div>
            <% for(var i = 0;i < team.length;i++) { %>
            <div class="team-data">
                <% if(user.role === 'admin') { %>
                <div class="list-group-item team-data-<%- i %>"
                     ng-click="showTeam('<%- i %>')" style="cursor: pointer"><%- team[i].t_name %><span
                            class="pull-right fa fa-trash-o" style="color: #a94442;padding-right: 15px;"
                            ng-click="deleteTeam('<%- i %>',$event)"></span>
                </div>
                <% } else { %>
                <div class="list-group-item team-data-<%- i %>"
                     ng-click="showTeam('<%- i %>')" style="cursor: pointer"><%- team[i].t_name %>
                </div>
                <% } %>
                <input type="hidden" ng-model="team[i].leader" value="<%- team[i].leader %>"/>
                <input type="hidden" ng-model="team[i].description" value="<%- team[i].description %>"/>
            </div>
            <% } %>

            <% if(user.role === 'admin') { %>
            <button class="btn btn-success col-md-12 margin-top-20"
                    ng-click="newTeamModal()"><i class="fa fa-group"></i>&nbsp;新建研发组
            </button>
            <% } %>
        </div>
    </div>
</div>

<% var editable = false; if (user.role === 'admin') {
    editable = true;
} %>
<div class="col-md-8 col-sm-8 margin-top kick-padding-margin" style="position: relative;left:-30px;">
    <div class="search-area big-panel-container">
        <input id="myRole" type="hidden" value="<%- user.role %>">

        <div class="col-md-12 big-panel">

            <div class="col-md-12 kick-padding-margin form-horizontal">
                <h2 class="group-head"><span>研发组详细信息</span></h2>
                <span class="fa fa-angle-double-up fa-angle-double-down" id="expand-0"
                      style="position: relative;top:-30px;left:98%;z-index: 100" data-toggle="tooltip"
                      data-placement="left" title="展开 / 收起"></span>

                <div class="part-0">
                    <div class="form-group">
                        <label class="col-md-2 control-label" style="text-align: center">研发组名称</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" ng-model="current.t_name" id="t_name" readonly/>
                        </div>

                        <label class="col-md-2 control-label" style="text-align: center">研发组长</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" ng-click="changeLeader"
                                   ng-model="current.leaderName"
                                   id="leader" readonly/>
                            <span ng-click="changeLeader()" class="fa <% if(editable){ %>fa-edit fa-lg<% } %>"
                                  style="position: relative;top:-26px;left: 91%"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label" style="text-align: center">项目组简介</label>
                        <% if(editable){ %>
                        <div class="col-md-6">
                            <textarea ng-model="current.description" class="form-control" id="description"></textarea>
                        </div>
                        <div class="col-md-4 margin-top-20">
                            <button class="btn pull-right btn-primary" id="addMember" style="margin-left:20px;"><i
                                        class="fa fa-plus"></i>&nbsp;&nbsp;添加成员
                            </button>
                            <button class="btn pull-right btn-danger" ng-click="saveTeam()" style="margin-left:15px;"><i
                                        class="fa fa-book"></i>&nbsp;&nbsp;保存更改
                            </button>
                        </div>
                        <% } else { %>
                        <div class="col-md-10">
                            <textarea ng-model="team.description" class="form-control" id="description"
                                      readonly><%- team.description %></textarea>
                        </div>
                        <% } %>

                    </div>
                </div>
            </div>

            <div id="searchContent" class="col-md-12 margin-top-20" style="padding-right:0">
                <div style="margin-bottom: 30px;">
                    <ul class="list-group" style="margin-bottom: 0">
                        <li class="list-group-item active" style="background-color: #2a6496;color:#bbb">
                            <% if(!editable) { %>
                            <div class="col-md-4 kick-padding-margin">组员账户名</div>
                            <div class="col-md-4 kick-padding-margin">组员姓名</div>
                            <div class="col-md-4 kick-padding-margin">组员邮箱</div>
                            <% } else { %>
                            <div class="col-md-3 kick-padding-margin">组员账户名</div>
                            <div class="col-md-3 kick-padding-margin">组员姓名</div>
                            <div class="col-md-4 kick-padding-margin">组员邮箱</div>
                            <div class="col-md-2 kick-padding-margin">移出该组</div>
                            <% } %>
                        </li>

                        <% for(var i = 0;i < team.length;i++ ) {
                            var display = "none"; i === 0 && (display = "block");
                        %>

                        <% for(var j = 0;j < (team[i].member ? team[i].member.length : 0);j++ ){
                            var leader = ""; team[i].member[j].role === 'manager' && (leader = "leader-color");
                        %>
                        <li class="list-team team-<%- i %> list-group-item list-group-item-info <%- leader %>"
                            id="team-<%- i %>-<%- team[i].member[j].u_id %>"
                            style="display:<%- display %>;">
                            <% if(!editable) { %>
                            <div class="col-md-4">
                                <% if(leader){ %>
                                <span class="fa fa-user" style="font-size: 10px;">&nbsp;&nbsp;组长&nbsp;&nbsp;</span>
                                <% } %>
                                <%- team[i].member[j].username %></div>
                            <div class="col-md-4 kick-padding-margin"><%- team[i].member[j].u_name %></div>
                            <div class="col-md-4 kick-padding-margin"><%- team[i].member[j].email %></div>
                            <% } else { %>
                            <div class="col-md-3">
                                <% if(leader){ %>
                                <span class="fa fa-user" style="font-size: 10px;">&nbsp;&nbsp;组长&nbsp;&nbsp;</span>
                                <% } %>
                                <%- team[i].member[j].username %></div>
                            <div class="col-md-3 kick-padding-margin"><%- team[i].member[j].u_name %></div>
                            <div class="col-md-4 kick-padding-margin"><%- team[i].member[j].email %></div>
                            <% if(!leader) { %>
                            <div class="col-md-2 kick-padding-margin"><a
                                        ng-click="removeMember('<%- team[i].member[j].u_id %>')"
                                        class="fa fa-trash-o fa-lg" style="color: #a55"></a></div>
                            <% } %>
                            <% } %>
                        </li>
                        <% } %>
                    </ul>
                    <% } %>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade new-team" style="position: fixed;top:60px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">新建研发组</h4>
            </div>
            <div class="col-md-11 form-horizontal" style="padding-top: 25px;">

                <div class="form-group">
                    <label class="col-md-4 control-label" style="text-align: center">研发组名称</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="t_name_new"/>
                    </div>
                </div>

                <div class="form-group  margin-top-20">
                    <label class="col-md-4 control-label" style="text-align: center">项目组简介</label>
                    <div class="col-md-8">
                        <textarea class="form-control" id="new_description"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="margin-top-20 col-md-11" style="padding-right: 2px;">
                    <button type="button" ng-click="saveNewTeam()" class="btn btn-primary col-md-2 pull-right"
                            data-dismiss="modal">保存
                    </button>
                    <button type="button" class="btn btn-warning col-md-2 pull-right" style="margin-right: 20px"
                            data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade member-modal" style="position: fixed;top:60px;">
    <div class="modal-dialog" style="width:60%;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加研发组成员
                    <span class="fa fa-question-circle"
                          data-toggle="tooltip" data-placement="right" title="1.添加已分组的用户会导致所属研发组变更,2.研发组长请单独指定"></span>
                </h4>
            </div>
            <div class="col-md-12 form-horizontal" style="padding-top: 25px;min-height: 318px;">
                <div class="col-md-6">
                    <div class="col-md-12 kick-padding-margin">
                        <div class="col-md-5 ">
                            <h4>未分组用户</h4>
                        </div>
                        <div class="col-md-7 kick-padding-margin">
                            <ul class="pagination" style="margin: 0;float: right">
                                <li><a href="javascript:void(0)" ng-click="previousPage(1)"><span
                                                aria-hidden="true">&laquo;</span></a></li>
                                &nbsp;
                                <li>
                                    <a href="javascript:void(0)" ng-click="nextPage(1)"><span
                                                aria-hidden="true">&raquo;</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <table class="table table table-striped table-hover table-responsive table-1">
                        <tr class="info">
                            <th>选择</th>
                            <th>账号</th>
                            <th>姓名</th>
                        </tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <div class="col-md-12 kick-padding-margin">
                        <div class="col-md-5 ">
                            <h4>已分组用户</h4>
                        </div>
                        <div class="col-md-7 kick-padding-margin">
                            <ul class="pagination" style="margin: 0;float: right">
                                <li><a href="javascript:void(0)" ng-click="previousPage(2)"><span
                                                aria-hidden="true">&laquo;</span></a></li>
                                &nbsp;
                                <li>
                                    <a href="javascript:void(0)" ng-click="nextPage(2)"><span
                                                aria-hidden="true">&raquo;</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <table class="table table table-striped table-hover table-responsive table-2">
                        <tr class="info">
                            <th>选择</th>
                            <th>账号</th>
                            <th>姓名</th>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <div class="margin-top-20 col-md-12" style="padding-right: 2px;">
                    <button type="button" ng-click="addMember()" class="btn btn-primary col-md-2 pull-right"
                            data-dismiss="modal">添加
                    </button>
                    <button type="button" class="btn btn-warning col-md-2 pull-right" style="margin-right: 20px"
                            data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    $(function ($) {
        var menu = $('.rm-nav').rMenu({
            minWidth: '960px'
        });
    });
    $(document).ready(function () {
        $(".change-type").each(function () {
            $(this).click(function () {
                $(".change-type").each(function () {
                    $(this).removeClass("active");
                });
                $(this).addClass("active");
            })
        });
    });

    $(".fa-angle-double-up").each(function () {
        $(this).on('click', function () {
            $(this).toggleClass("fa-angle-double-down");
            $(".part-" + $(this).attr("id").split("-")[1]).toggle(300);
        });
    });
    $('[data-toggle="tooltip"]').tooltip();
</script>
</body>
</html>